<template>
  <div class="container">
    <img class="titleBg" src="@/assets/aiScreen/title1.png" />
    <span class="myTitle">{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: "lRForm",
  props: {
    text: {
      type: String
    }
  },
  data() {
    return {

    }
  },
  created() { },
  mounted() {

  },
  watch: {},
  computed: {},
  methods: {},
  components: {}
}
</script>
<style scoped>
.container {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  width: 100%;
}

.titleBg {
  position: absolute;
  width: 100%;
  left: 0;
}

.myTitle {
  padding-left: 11%;
  padding-top:3%;
  color: #fff;
  font-family: 'Arial', sans-serif;
  /* 使用Arial字体 */
  font-size: 18px;
  /* 字体大小 */
  font-weight: 1000;
  /* 字体加粗 */
  display: inline-block;
  /* 使元素成为行内块级元素 */
  line-height: 52px;
  /* 调整行高 */
  background: linear-gradient(to bottom, #e7edf0, #a0cae2);
  /* 渐变背景 */
  -webkit-background-clip: text;
  /* 兼容Webkit内核浏览器 */
  background-clip: text;
  /* 标准属性 */
  -webkit-text-fill-color: transparent;
  /* 使文本颜色透明 */
}</style>